var React = require('react');
var NoteListBox = require('./NoteListBox.jsx');
var NoteCreationBox = require('./NoteCreationBox.jsx');

var NoteApp = React.createClass({
    getInitialState(){
        return {id: null};
    },
    onEdit(id){
        this.setState({currentlyEdited: id});
    },
    onAdd(){
        this.setState({currentlyEdited: null});
    },
    render(){
        return (
            <div className="container">
                <div className="row header">
                    <div className="page-header">
                        <h1>React Note App</h1>
                    </div>
                </div>
                <div className="row">
                    <NoteListBox onEdit={this.onEdit} onAdd={this.onAdd} />
                    <NoteCreationBox id={this.state.currentlyEdited} />
                </div>
            </div>
        );
    }
});

module.exports = NoteApp;